<template>
  <div class="position-full flex-box2">
    <div class="flex-justify-center item" v-for="(item,index) in 4" :key="index"
         :style="containerStyle(index)">
      {{item}}
    </div>
  </div>
</template>

<script>
  import {formatColor} from '@/utils';
  import {mapState} from 'vuex';

  export default {
    name: 'PadRelatedRooms',
    props: {
      widget: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        formatColor: formatColor,
        active: 0,
      };
    },
    computed: {
      ...mapState({
        activeTheme: state => state.ide.activeTheme,
      }),
      containerStyle() {
        return (idx) => {
          const {
            activeItemTextColor,
            itemTextColor,
            activeItemBackColor,
            itemBackColor,
            textSize,
            itemSize = {}
          } = this.widget.UI.data;
          return {
            'color': formatColor(this.active === idx ? activeItemTextColor : itemTextColor, this.activeTheme),
            'backgroundColor': formatColor(this.active === idx ? activeItemBackColor : itemBackColor, this.activeTheme),
            'width': itemSize.width + 'px',
            'height': itemSize.height + 'px',
            'fontSize': textSize + 'px'
          }
        };
      },
    },
  };
</script>

<style scoped lang="less">
  .flex-box2 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    align-content: center;
    padding: 10px;
    box-sizing: border-box;
  }

  .item {
    border-radius: 8px;
  }
</style>
